﻿<%@ Page Title="" Language="C#" MasterPageFile="~/TitleLayout.master" %>

<%@ Register Src="~/CodeFormatter.ascx" TagName="Code" TagPrefix="demo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeaderContent" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="LeftContent" runat="Server">
    <div style="margin-bottom: 10px;">
        <asp:Image ID="Image3" runat="server" ImageUrl="~/Sortable/Images/ui_text_sortable.gif">
        </asp:Image></div>
    <DotNetAge:Accordion ID="Accordion1" runat="server" SkinID="Black-Ice" Animated="bounceslide">
        <Views>
            <DotNetAge:NavView ID="Nav1" runat="server" Text="Feature Examples" Target="demoFrame">
                <Items>
                    <DotNetAge:NavItem Text="Core Features" NavigateUrl="~/Sortable/Core.aspx" />
                    <DotNetAge:NavItem Text="Drop placeholder" NavigateUrl="~/Sortable/DropPlaceHolder.aspx" />
                    <DotNetAge:NavItem Text="Connect lists" NavigateUrl="~/Sortable/ConnectLists.aspx" />
                    <%--                    <DotNetAge:NavItem Text="Connect lists though Tabs" NavigateUrl="~/Sortable/ConnectListsThoughTabs.aspx" />
--%>
                    <DotNetAge:NavItem Text="Handle empty list" NavigateUrl="~/Sortable/HandleEmptyList.aspx" />
                    <DotNetAge:NavItem Text="Include /exclude items" NavigateUrl="~/Sortable/HandlingItems.aspx" />
                    <DotNetAge:NavItem Text="Delay start" NavigateUrl="~/Sortable/DelayStart.aspx" />
                    <DotNetAge:NavItem Text="Display as grid" NavigateUrl="~/Sortable/DisplayAsGrid.aspx" />
                    <DotNetAge:NavItem Text="Portalets" NavigateUrl="~/Sortable/Portalets.aspx" />
                    <DotNetAge:NavItem Text="Programmatic creation" NavigateUrl="~/Sortable/ProgrammaticCreation.aspx" />
                </Items>
            </DotNetAge:NavView>
        </Views>
    </DotNetAge:Accordion>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MiddleContent" runat="Server">
    <iframe frameborder="0" style="height: 550px; width: 100%" name="demoFrame" scrolling="no"
        src="Core.aspx"></iframe>
    <DotNetAge:Tabs ID="Tabs1" runat="server">
        <Animations>
            <DotNetAge:AnimationAttribute AnimationType="opacity" Value="toggle" />
            <DotNetAge:AnimationAttribute AnimationType="height" Value="toggle" />
        </Animations>
        <Views>
            <DotNetAge:View Text="Overview" runat="server" ID="overView">
                <p>
                    Sortable is a ASP.NET WebControl that encapsulat the jQuery UI resizable it makes
                    selected controls sortable by dragging with the mouse.
                </p>
                <p>
                    All ClientEvents receive two arguments: The original browser event and a prepared
                    ui object, view below for a documentation of this object:
                </p>
                <ul>
                    <li>ui.helper - the current helper element (most often a clone of the item)</li>
                    <li>ui.position - current position of the helper</li>
                    <li>ui.offset - current absolute position of the helper</li>
                    <li>ui.item - the current dragged element * ui.placeholder - the placeholder (if you
                        defined one)</li>
                    <li>ui.sender - the sortable where the item comes from (only exists if you move from
                        one connected list to another)</li>
                </ul>
            </DotNetAge:View>
            <DotNetAge:View Text="Properties" runat="server" ID="propertyView">
                <p>
                    The Selectable control 's properties is show below</p>
                <div style="border: 1px dashed #808080;">
                    <demo:Code runat="server" ID="quickDemo">
                        <CodeTemplate>
<DotNetAge:Sortable ID="MySortable"
    AllowDropOnEmpty="true"
    AutoScroll="true"
    Container="Parent"
    Cursor="move"
    DragHelper="Clone"
    DragHelperOpacity="0.5"
    DragOrientation="Both"
    DragStartDelay="0"
    DragStartDistance="0"
    ForceHelperSize="true"
    ForcePlaceholderSize="true"
    OnClientSort="javascript puts there"
    OnClientSortActivate=""
    OnClientSortBeforeStop=""
    OnClientSortChange=""
    OnClientSortDeactivate=""
    OnClientSortOut=""
    OnClientSortOver=""
    OnClientSortReceive=""
    OnClientSortRemove=""
    OnClientSortStart=""
    OnClientSortStop=""
    OnClientSortUpdate=""
    PlaceHolderCssClass="placeholder"
    Revert="true"
    ScrollSensitivity="10"
    ScrollSpeed="100"
    SnapX="10"
    SnapY="10"
    Tolerance="Pointer"
    ZIndex="1000"
>
      <Target TargetIDs="ControlID1, ... ,ControlIDn" 
                 Selector=".ui-widget-header" TargetID="ControlID" />
      <ConnectWith />
      <ContainsIn />
      <CursorPosition Bottom="0" Left="0" Right="0" Top="0" />
      <DisableDraggingElements />
      <DragHandler />
      <DisableSortableItems />
</DotNetAge:Sortable>                  
                        </CodeTemplate>
                    </demo:Code>
                </div>
            </DotNetAge:View>
        </Views>
    </DotNetAge:Tabs>
</asp:Content>
